import {Component, Input, OnInit} from '@angular/core';
import * as echarts from 'echarts';
import {ContentService} from '../content.service';
import {timer} from 'rxjs';

@Component({
  selector: 'app-policy-spread-chart',
  templateUrl: './policy-spread-chart.component.html',
  styleUrls: ['./policy-spread-chart.component.less']
})
export class PolicySpreadChartComponent implements OnInit {
  spotList = [];
  linkList = [];
  provinceList = [];
  provinceSelected = '';
  isSpinning = false;
  selectedTab = 0;
  @Input() heightCount: string;
  @Input() dataBySearch: any;
  @Input() tabIsShow = false;

  constructor(private CService: ContentService) {
  }

  ngOnInit(): void {
    this.getProvinceList();
    this.getCountSpread();
  }

  graphLink(option: any) {
    const el = document.getElementById('publish-spread') as HTMLDivElement;
    const myCharts = echarts.init(el);
    myCharts.resize({height: this.heightCount});
    this.spotList = option.data.map((data: any) => {
      data.symbolSize = data.symbolSize * 3;
      return data;
    });
    this.linkList = option.links;
    myCharts.setOption({
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          type: 'graph',
          layout: 'force',
          force: {
            gravity: 0,
            repulsion: 2,
            edgeLength: 60
          },
          zoom: 0.6,
          symbolSize: 10,
          roam: true,
          label: {
            show: false,
            position: 'left'
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 20
          },
          itemStyle: {
            color: '#365295'
          },
          data: this.spotList,
          // links: [],
          links: this.linkList,
          focusNodeAdjacency: true
        }
      ]
    });

  }

  getCountSpread() {
    if (this.dataBySearch) {
      // 搜索数据已到，但图形容器未形成。所以设置一个延时器
      timer(500).subscribe(() => {
        this.graphLink(this.dataBySearch);
      });

    } else {
      this.isSpinning = true;
      this.CService.getCountSpread(this.provinceSelected).subscribe(res => {

        // 预处理数据, 如果 symbolSize 大于50, 设置成50。
        res.result.data.forEach(item => {
            if(item.symbolSize > 50){
                item.symbolSize = 50;
            }
        });

        this.graphLink(res.result);
        this.isSpinning = false;
      });
    }

  }

  getProvinceList() {
    this.CService.getProvinceList().subscribe(res => {

      // 数据预处理。 把上海放到第一个。
      if( res.result && res.result.length ){
          let pos = res.result.indexOf('上海市');
          if( pos > -1){
              res.result.splice( pos, 1);
              res.result.unshift('上海市');
          }
      }

      this.provinceList = res.result;
      if (this.tabIsShow) {
        this.provinceSelected = this.provinceList[this.selectedTab];
      }
    });
  }

  tabActivated() {
    this.isSpinning = true;
    this.provinceSelected = this.provinceList[this.selectedTab];
    this.getCountSpread();
    this.isSpinning = false;
  }
}
